<!-- 轮播图列表 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="列表" name="1">
            <si-collapse-group
                v-model="list"
                is-draggable
                is-add
                is-delete
                add-text="添加轮播项"
                :add="getAddData"
                :node-title="data => data.name"
            >
                <template #item="{ element, index }">
                    <div class="row-wrap">
                        <div class="left-wrap">
                            图片
                        </div>
                        <div class="right-wrap">
                            <si-image-picker
                                v-model="element.pic"
                                type="image"
                                :show-label="false"
                                :size="100"
                            />
                        </div>
                    </div>

                    <el-divider></el-divider>
                    <si-click-event v-model:event="element.customFeature" />
                </template>
            </si-collapse-group>

            <el-divider></el-divider>
            <layout-pane label="选中项">
                <si-select
                    v-model="widget.widgetData.eles.customFeature.selectedIndex"
                    :list="listSelects"
                />
                <div class="tip-txt" style="margin-top: 5px;">注：当前列表索引值</div>
            </layout-pane>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiSelect,
    SiClickEvent,
    SiImagePicker,
    SiCollapseGroup
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'CarouselContent',
    components: {
        LayoutPane,
        SiSelect,
        SiClickEvent,
        SiImagePicker,
        SiCollapseGroup
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        // const activeName = computed({
        //     get: () => widget.value.widgetData.eles.customFeature.handleSlideIndex || '0',
        //     set: val => widget.value.widgetData.eles.customFeature.handleSlideIndex = val
        // })

        const list = computed({
            get: () => widget.value.widgetData.eles.content || [],
            set: val => widget.value.widgetData.eles.content = val
        })

        const listSelects = computed(() => list.value.map((item, index) => ({
            label: item.name,
            value: index.toString()
        })))

        const getAddData = () => {
            return {
                weight: 0,
                name: '轮播项',
                pic: '',
                customFeature: {}
            }
        }

        return {
            widget,
            // activeName,
            list,
            listSelects,
            getAddData
        }
    }
})
</script>

<style lang="less" scoped>
.row-wrap {
    display: flex;
    align-items: center;
    .left-wrap {
        margin-right: 10px;
    }
    .right-wrap {
        // 
    }
}
.tip-txt {
    font-size: 12px;
    color: var(--edit-text-color-secondary);
}
</style>